<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"
		/>
		<meta name="format-detection" content="telephone=yes" />
		<meta name="format-detection" content="email=no" />
		<meta http-equiv="Pragma" content="no-cache" />
		<meta http-equiv="Cache-Control" content="no-cache" />
		<meta http-equiv="Expires" content="0" />
		<title>个人中心</title>
		<!-- 引入 vant UI 组件库样式文件 -->
		<link rel="stylesheet" href="../common/css/vant-index.css" />
		<link rel="stylesheet" href="css/patientStudio.css" />
		<style type="text/css">
			.van-cell-group--inset{
				border-radius: 0;
				margin: 0 10px;
				border-bottom: 1px solid var(--van-cell-border-color);
			}
		</style>
	</head>

	<body>
		<div id='app' v-cloak>
			<div class="id_container ep_container">
				<van-cell-group inset>
					<van-field 
						v-model="phone" 
						label="手机号" 
						placeholder="请输入新的手机号码" 
						type='number' 
						title-width='130rpx' 
						maxlength='11' 
					/>
				</van-cell-group>
				<van-cell-group inset>
					<van-field 
						v-model="sms" 
						center 
						clearable 
						label="验证码" 
						placeholder="请输入验证码" 
						use-button-slot 
						title-width='130rpx'
					>
						<template #button>
						<van-button 
							slot="button" 
							size="small" 
							type="primary" 
							round 
							plain
							color='#E22E30'
							@click="sendCode"
						>
							{{time}}
						</van-button>
						
						</template>
					</van-field>
				</van-cell-group>
				<div class="phone-button">
					<button @click="submitForm">确定</button>
				</div>
			</div>
			
			
		</div>
	</body>
	<!-- 引入 rem -->
	<script src="../common/js/rem.js"></script>
	<!-- 上线环境用 -->
	<script src="../common/js/vue.global.prod.js"></script>
	<!-- 引入 UI 组件库 -->
	<script src="../common/js/vant.min.js"></script>
	<!-- axios 接口调用 -->
	<script src="../common/js/axios.min.js"></script>
	<script src="../common/js/url.min.js"></script>
	<script src="../base.js"></script>
	<script type="module">
		import {
			getAction,
			postAction,
			spliceUrl,
		} from "../common/js/api/vue3-axios-utils.js";
	

		const PatientData = {
			data() {
				return {
					url: {
						getCode:'/sys/sms',
						bindPhone:'/patient/pa/updateMobile'
					},
					detail:{},
					pid:'',
					time:'发送验证码',
				    isClick:true,
				    phone:'',
				    second:60,
				    btnDisabled:false,
				    sms:''
				};
			},
			created() {
				this.init()
			},
			mounted() {
				
			   
			},
			methods: {
				async init () {
					this.pid = url('?pid')
	           	},
	           	
				handleGetCode(){
					postAction(spliceUrl(this.url.getCode),{mobile:this.phone,smsmode:0}).then((res) => {
						res = res.data
						console.log('handleGetCode',res)
						if(res.success){
							this.$toast.success('发送成功')
						}else{
							this.$toast.fail(res.message)
						}
					})
				},
				handleBindPhone(){
					postAction(spliceUrl(this.url.bindPhone),{patientId:this.pid,phone:this.phone,smsmode:this.sms}).then((res) => {
						res = res.data
						console.log('handleBindPhone',res)
						if(res.success){
							this.$toast.success({
								message:'修改成功',
								duration:300,
								onClose:function(){
									window.location.href = './editPatientInfo.html?id='+this.pid
								}
							});
						}else{
							this.$toast.fail(res.message)
							wind
						}
					})
				},
				//发送验证码
				sendCode(){
					if (this.isClick) {
				        if (/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(this.phone)) { 
					        	this.handleGetCode() // 获取验证码接口 
					        	this.isClick = false 
					        	let s = 60 
					        	this.time = s + 's' 
					        	let interval = setInterval(() => { 
					        		s-- 
					        		this.time = s + 's' 
					        		if (s < 0) { 
					        			this.time='重新获取' 
					        			this.isClick=true 
					        			clearInterval(interval) 
					        		} 
					        	}, 1000) 
					    	} else { 
					        	this.$toast.fail( '请输入正确的手机号码')
				        }
				    }
				},
				submitForm(){
					this.handleBindPhone()
				}
			},
			components:{
			}
		};

		const app = Vue.createApp(PatientData);

		app.use(vant);

		// 通过 CDN 引入时不会自动注册 Lazyload 组件
		// 可以通过下面的方式手动注册
		app.use(vant.Lazyload);

		// 调用函数组件，弹出一个 Toast
		// vant.Toast("刷新成功");

		app.mount("#app");
	</script>

</html>

